﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style type="text/css">
        .progressbar { width: 500px; height: 30px; margin: 0 auto; background: #fff; border: 1px solid #000; }
        .bar { width: 0%; height: 30px; background-color: red; color:#fff; }
    </style>
    <script src="Js/jquery-1.12.0.js"></script>

    <script language="javascript">
        function SetPorgressBar(pos) {
            //设置进度条居中
            //var screenHeight = window["mainWindow"].offsetHeight;
            //var screenWidth = window["mainWindow"].offsetWidth;
            //ProgressBarSide.style.width = Math.round(screenWidth / 2);
            //ProgressBarSide.style.left = Math.round(screenWidth / 4);
            //ProgressBarSide.style.top = Math.round(screenHeight / 2);
            //ProgressBarSide.style.height = "21px";
            //ProgressBarSide.style.display = "";

            ////设置进度条百分比                       
            //ProgressBar.style.width = pos + "%";
            //ProgressText.innerHTML = pos + "%";

            $(".bar").css("width", pos + "%");
        }

        //完成后隐藏进度条
        function SetCompleted() {
            ProgressBarSide.style.display = "none";
        }
    </script>

</head>
<body>
    <div class="progressbar">
        <div class="bar"></div>
    </div>

    <div id="ProgressBarSide" style="position: absolute; height: 21px; width: 100px; color: Silver; border-width: 1px; border-style: Solid; display: none">
        <div id="ProgressBar" style="position: absolute; height: 21px; width: 0%; background-color: #3366FF"></div>
        <div id="ProgressText" style="position: absolute; height: 21px; width: 100%; text-align: center"></div>
    </div>
</body>
</html>
